// ChangePassword.js
import React, { useState } from "react";
import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
import { useNavigation } from "@react-navigation/native";

const ChangePassword = () => {
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [error, setError] = useState(null);
  const navigation = useNavigation();

  const handlePasswordChange = () => {
    if (password !== confirmPassword) {
      setError("密码不匹配");
      return;
    }
    // 这里可以添加后端更新密码的逻辑
    console.log("密码已更新: ", password);
    navigation.goBack();
  };

  const handleGoBack = () => {
    navigation.goBack();
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.closeButton} onPress={handleGoBack}>
        <Text style={styles.closeText}>{'< 返回'}</Text>
      </TouchableOpacity>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.title}>修改密码</Text>
        <Text style={styles.instructionText}>
          请在下方输入新密码
        </Text>
        <TextInput
          style={styles.input}
          placeholder="新密码"
          secureTextEntry
          value={password}
          onChangeText={setPassword}
        />
        <TextInput
          style={styles.input}
          placeholder="确认密码"
          secureTextEntry
          value={confirmPassword}
          onChangeText={setConfirmPassword}
        />
        {error && <Text style={styles.error}>{error}</Text>}
        <TouchableOpacity
          style={styles.button}
          onPress={handlePasswordChange}
          disabled={password.length === 0 || confirmPassword.length === 0}
        >
          <Text style={styles.buttonText}>修改密码</Text>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
    padding: 20,
    backgroundColor: "white",
  },
  scrollView: {
    flex: 1,
  },
  closeButton: {
    marginBottom: 20,
    alignSelf: "flex-start",
  },
  closeText: {
    fontSize: 16,
    color: "#fff", // 错误提示颜色
  },
  title: {
    fontSize: 32,
    fontWeight: "bold",
    marginBottom: 20,
    color: "black", // 标题颜色
  },
  instructionText: {
    fontSize: 18,
    marginBottom: 20,
    color: "black", // 说明文字颜色
  },
  input: {
    height: 50,
    width: "100%",
    borderWidth: 1,
    borderColor: "#DCDCDC", // 输入框边框颜色
    borderRadius: 10,
    paddingHorizontal: 15,
    marginBottom: 20,
    backgroundColor: "#C6E2FF", // 输入框背景颜色
    color: "black", // 输入文字颜色
  },
  error: {
    color: "#FF3B30", // 错误提示颜色
    fontSize: 14,
    marginTop: 10,
  },
  button: {
    backgroundColor: "#007AFF", // 按钮颜色
    paddingVertical: 15,
    borderRadius: 10,
    marginTop: 20,
    width: "100%",
    alignItems: "center",
  },
  buttonText: {
    color: "#fff",
    fontWeight: "bold",
    fontSize: 18,
  },
});

export default ChangePassword;
